<template>
  <div>
    <div class="user_card" @click="isband ? goSwitch() : goPatient()">
      <template v-if="isband == false">
        <img src="@/assets/img/bg_top up@2x.png" alt="" class="bgclass" />
        <div class="left">
          <img src="@/assets/img/icon_boy.png" alt="" />

          <span>未绑卡，请先绑定就诊卡</span>
        </div>
      </template>
      <template v-else>
        <img src="@/assets/img/bg_top up@2x.png" alt="" class="bgclass" />
        <div class="left">
          <img src="@/assets/img/icon_boy.png" alt="" v-if="userInfo.sex == '1'" />
          <img src="@/assets/img/icon_girl.png" alt="" v-else>
          <span>{{
              userInfo.name
          }}</span>
        </div>
      </template>
      <div class="right">
        <span>
          切换
        </span>

        <img src="@/assets/img/tanchu.png" alt="" />
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {},
      isband: null,
    };
  },
  created() {
    if (window.localStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultUserInfo")
      );
    }
    if (JSON.stringify(this.userInfo) == "{}") {
      this.isband = false;
    } else {
      this.isband = true;
    }
  },
  destroyed() {
    console.log("destroyed")
  },
  methods: {
    goSwitch() {
      this.$router.push({ path: "/switch_patient" });
    },
    goPatient() {
      this.$router.push({
        path: "/my_patient",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.user_card {
  margin: 15px 16px;
  position: relative;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;

    img {
      margin: 0 15px;
      width: 23px;
      height: 23px;
    }
  }

  .right {
    width: 4.5rem;
    color: #ffffff;
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .right img {
    width: 8px;
    height: 13px;
    position: relative;
    margin: 0 0.75rem;
  }

  .bgclass {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }
}
</style>